import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import dayjs from 'dayjs'
import DailyBill from './components/DailyBill'

const Month = () => {
  const billList = useSelector(state => state.bill.billList)
  const monthGroup = useMemo(() => {
    return _.groupBy(billList,item => dayjs(item.date).format('YYYY-MM'))
  },[billList])
  const [dateVisible, setDateVisible] = useState(false)
  const [chosenTime, setChosenTime] = useState(() => {
    return new Date()
  })

  const [currentList,setCurrentList] = useState([])
  const monthResult = useMemo(() => {
    let pay = 0
    let income = 0
    
    if(currentList){
    pay = currentList.filter(item => item.type === 'pay').reduce((before, after) => before + after.money,0)
    income = currentList.filter(item => item.type === 'income').reduce((before, after) => before + after.money,0)
    }
  
    return {
      pay,
      income,
      total: pay + income
    }
  },[currentList])

  const handleConfirm = date => {
    setDateVisible(false)
    setChosenTime(date)
    setCurrentList(monthGroup[dayjs(date).format('YYYY-MM')])
    
  }

  useEffect(() => {
    const nowDate = new Date()
    if(monthGroup[dayjs(nowDate).format('YYYY-MM')])
    setCurrentList(monthGroup[dayjs(nowDate).format('YYYY-MM')])
  },[monthGroup])

  /* 当前月按日分组 */
  const dayGroup = useMemo(() => {
    const groupData = _.groupBy(currentList,item => dayjs(item.date).format('YYYY-MM-DD'))
    const keys = Object.keys(groupData)
    return {
      groupData,
      keys
    }
  },[currentList])
  return (
    <div className='monthlyBill'>
      <NavBar className='nav' backArrow={false}>
        月度收支
      </NavBar>
      <div className='content'>
        <div className='header'>
          {/* 时间切换区域 */}
          <div className='date' onClick={() => setDateVisible(true)}>
            <span className='text'>
              {chosenTime.getFullYear()} | {chosenTime.getMonth() + 1}月账单
            </span>
            <span
              className={classNames('arrow', dateVisible && 'expand')}
            ></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className='item'>
              <span className='money'>{monthResult.pay.toFixed(2)}</span>
              <span className='type'>支出</span>
            </div>
            <div className='item'>
              <span className='money'>{monthResult.income.toFixed(2)}</span>
              <span className='type'>收入</span>
            </div>
            <div className='item'>
              <span className='money'>{monthResult.total.toFixed(2)}</span>
              <span className='type'>结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className='kaDate'
            onCancel={() => setDateVisible(false)}
            onConfirm={handleConfirm}
            title='记账日期'
            precision='month'
            visible={dateVisible}
            max={new Date()}
          />
        </div>
        {
          dayGroup.keys.map(item => {
            return <DailyBill date={item} billList={dayGroup.groupData[item]} key={item} />
          })
        }
        
      </div>
    </div>
  )
}

export default Month
